<template>
  <div class="list-div">
    <el-row>
      <el-form>
        <el-col :span="24">
          <el-col :span="4">
            <el-form-item label="分类" label-width="80px">
              <el-select v-model="search.type" clearable filterable placeholder="请选择分类" style="width: 100%">
                <el-option :label="d.name" :value="d.id" :key="d.id" v-for="(d,ddix) in types"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="" label-width="30px">
              <el-button class="btnAdd" size="mini"  @click="getData()">搜索</el-button>
              <el-button class="btnAdd" size="mini"  @click="add()">添加</el-button>
            </el-form-item>
          </el-col>
        </el-col>
      </el-form>
    </el-row>
    <el-row>
      <el-table :data="page.records" header-row-class-name="tableheader" height="calc(100vh - 220px)" border  style="width: 100%">
        <el-table-column  prop="type" label="分类">
          <template slot-scope="scope">
            <span v-if="scope.row.type=='1'">home</span>
          </template>
        </el-table-column>
        <el-table-column  prop="img" label="图片">
          <template slot-scope="scope">
            <el-image style="height: 100px" :src="scope.row.img" alt="" @click="showFileImg(scope.$index, scope.row)"></el-image>
          </template>
        </el-table-column>
<!--        <el-table-column prop="time" label="发送时间">-->
<!--          <template slot-scope="scope">-->
<!--            <span>{{common.timestampToTimeMils(scope.row.time)}}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column label="操作" width="150">
          <template slot-scope="scope"  v-if="scope.row.id>0">
            <el-button class="opt2" size="mini"  @click="edit(scope.$index, scope.row)">编辑</el-button>
            <el-button class="opt5" size="mini"  type="danger"  @click="deleteData(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <div class="pagination">


      <el-pagination
        background
        @current-change="handleCurrentChange"
        :page-size="page.size"
        layout="total,  prev, pager, next, jumper"
        :total="page.total">
      </el-pagination>

    </div>

    <el-dialog :title="showTitle" :visible.sync="showEdit">

      <el-form ref="form" :rules="rules" :model="form" label-width="80px">

        <el-row>
          <el-col :span="24">
            <el-form-item label="分类" label-width="80px" prop="type">
              <el-select v-model="form.type" clearable  filterable placeholder="请选择" style="width: 100%">
                <el-option :label="d.name" :value="d.id" :key="d.id" v-for="(d,ddix) in types"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
              <el-form-item label="上传图片" prop="img">
                <ImgUpload @changeFiles="form.fileList= $event" :imgs="form.fileList" :limit="1"
                           @removeFile="removeFile($event)"
                           @uploadSuccess="uploadSuccess($event)"
                           lable=""/>
              </el-form-item>
          </el-col>

        </el-row>


        <el-form-item>
          <el-button class="btnAdd" type="primary" @click="submitForm('form')">提交</el-button>
        </el-form-item>

      </el-form>
    </el-dialog>

    <el-dialog :visible.sync="showIconDialog" :append-to-body="true" title="地图" z-index="1000" custom-class="dialogBig">
      <img width="100%" :src="this.showIcon" alt="" style="height: calc(80vh - 120px)">
    </el-dialog>
  </div>

</template>

<script>
  import ElRow from "element-ui/packages/row/src/row";
  import  ImgUpload from './ImgUpload.vue'

  export default {
    components: {ElRow,ImgUpload},
    name: 'Banner',
    data () {
      return {
        showIconDialog:false,
        showIcon:null,
        optType:'',
        types:[{id:'1',name:'home'}],
        search:{
          type:null,
        },
        showEdit: false,
        showTitle: '',
        page: {},
        pageNo: 1,
        form: {
          fileList:[],
          id:null,
          type: null,
          img: null,
        },
        rules: {
          type: [
            { required: true, message: '请选择类型', trigger: 'change' },
          ],
          img: [
            { required: true, message: '请上传图片', trigger: 'blur' },
          ],
        },
        content:'',
      }
    },
    methods: {

      handleCurrentChange(val){
        this.pageNo = val
        this.getData()
      },
      showFileImg(idx,row){
        this.showIconDialog=true
        this.showIcon = row.img
      },

      removeFile(file){
        this.form.img = null
      },
      uploadSuccess(file){
        this.form.img = file.url
      },
      getData(){
        this.$axios.get('/admin/banner/list', {
          params: {
            title: this.search.title,
            type: this.search.type,
            pageNo: this.pageNo,
          }
        }).then(r => {
          let res = r.data
          if (res.code !== 1) {
            this.$message.error(res.msg)
            return
          }
          this.page = res.data
        })
      },
      add(){
        this.optType='add'
        this.showEdit = true
        this.showTitle = '新增业务范围'
        this.form={
          fileList:[],
          id:null,
          type: null,
          img: null,
        }
      },
      edit(idx,row){
        this.optType='edit'
        this.showEdit = true
        this.showTitle = '修改业务范围'
        this.form.id=row.id
        this.form.type=row.type
        this.form.img=row.img
        this.form.fileList = []
        this.form.fileList.push({url:row.img})
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let url = '/admin/banner/add'
            if (this.optType=='edit'){
              url = '/admin/banner/update'
            }
            this.$axios.post(url, {
              id:this.form.id,
              type:this.form.type,
              img:this.form.img,
            }).then(r => {
              let  res = r.data
              this.$message.error(res.msg)
              if (res.code !== 1) {
                return
              }
              this.showEdit = false
              this.getData()
            })
          } else {
            return false;
          }
        });
      },

      deleteData(idx,row){
        this.$confirm('是否删除图片', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        }).then(() => {

          this.$axios.get('/admin/banner/delete', {
            params: {
              id: row.id,
            }
          }).then(r => {
            let res = r.data
            this.$message.error(res.msg)
            if (res.code !== 1) {
              return
            }
            this.getData()
          })

        }).catch(() => {

        });
      },
      init () {
        this.getData()
      }
    },
    mounted: function () {
    },
    created: function () {
      this.init()
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }

</style>
